import React from 'react'
import { Routes, Route, Link, NavLink } from 'react-router-dom'
import Home from './pages/Home'
import About from './pages/About'

export default function App() {
  return (
    <div>
      {/* Link可以帮助我们修改路径,但是不发送请求. Link最终在页面上渲染一个a标签 
      to属性就是目标路径,其实也可以不用写/. 但是建议写上 */}
      {/* <Link to="/home">首页</Link>
      <Link to="/about">关于</Link> */}
      {/* NavLink和Link的作用是一样的.但是NavLink可以自动给选中的a标签添加类名,帮助2我们快速的实现高亮. 默认添加的类名是active */}
      {/* <NavLink to="/home">首页</NavLink>
      <NavLink to="/about">关于</NavLink> */}
      
      {/* NavLink自定义高亮的类名 */}
      <NavLink
        to="/home"
        // 自定义类名
        // className={({ isActive }) => {
        //   // 一旦路径切换了,这个回调就会执行
        //   return isActive ? 'done' : ''
        // }}

        // 也可以使用行内样式,实现高亮
        style={({ isActive }) => {
          return isActive ? { color: 'red' } : {}
        }}
      >
        首页
      </NavLink>
      <NavLink
        to="/about"
        // className={({ isActive }) => {
        //   // 一旦路径切换了,这个回调就会执行
        //   return isActive ? 'done' : ''
        // }}
        style={({ isActive }) => {
          return isActive ? { color: 'red' } : {}
        }}
      >
        关于
      </NavLink>
      <hr />
      <Routes>
        {/* 一个Route就是一条前端路由规则. 在v6版本中,Route组件必须被Routes组件包裹 */}
        {/* 注意: element中要求传递时组件的实例 */}
        {/* 注意: path的值,可以忽略/ */}
        <Route path="/home" element={<Home />}></Route>
        <Route path="/about" element={<About />}></Route>
      </Routes>
    </div>
  )
}
